/*
 * @Description: 档案类型弹窗组件
 * @Author: Rfan
 * @Date: 2022-01-07 14:54:11
 * @LastEditTime: 2022-09-17 20:21:11
 */

import { useEffect, useState } from 'react';
import { Button, Checkbox, Divider, Form, Input, Modal, Radio, Select, Space } from 'antd';
import { CheckboxChangeEvent } from 'antd/lib/checkbox';
import arcTypeStore from '@/store/arcTypeStore';
import { useArcTypeContext } from '../../contexts/ArcTypeContext';
import type { IBaseDic, ICommonDialog } from '@/interfaces/global';
import { useArcTypeRouterTypeContext } from '@/view/system/ArcType/contexts/ArcTypeRouterTypeContext';
import { EnumArcTypeRouteTypes } from '@/view/system/ArcType/dictionaries';

const { Option } = Select;

interface AddDialogProps extends ICommonDialog {}

const AddDialog = (props: AddDialogProps) => {
  const { visible, onClose } = props;
  const { routerType } = useArcTypeRouterTypeContext();
  const { addAtType } = useArcTypeContext();
  const { atLevelList } = arcTypeStore;
  const [form] = Form.useForm();

  // 装盒是否选中
  const [boxChecked, setBoxChecked] = useState(false);

  useEffect(() => {
    if (visible) {
      form.setFieldsValue({ atType: 1, atLevel: 2, containerUnit: '盒', allowSearchUtilize: 1 });
    }
  }, [visible]);

  /**
   * @description: 提交表单，触发onFinish方法，新增档案类型
   */
  const submitFunc = () => {
    form.submit();
  };
  const onFinish = (values: any) => {
    if (!boxChecked && values.containerUnit) {
      values.containerUnit = '';
    }
    // atType 表单项目注销掉后values默认不带atType，需手动添加
    values.atType = 1;
    values.type = routerType || EnumArcTypeRouteTypes.Normal;

    addAtType(values).then(() => {
      onCancel();
    });
  };

  /**
   * @description: 失败触发方法，如校验不通过
   * @param {any} errorInfo 错误信息
   */
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  /**
   * @description:  关闭弹窗触发
   */
  const onCancel = () => {
    onClose();
  };

  return (
    <Modal
      destroyOnClose
      title="档案类型"
      visible={visible}
      width={600}
      onCancel={onCancel}
      footer={[
        <Button key="back" onClick={onCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={submitFunc}>
          保存
        </Button>
      ]}
    >
      {/* TODO 跟详情高度相似，有空可考虑抽象出来 */}
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 14 }}
        preserve={false}
        form={form}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          name="atName"
          label="名称"
          extra="档案类型的标识，如，科技档案，基建档案等"
          rules={[{ required: true }]}
        >
          <Input allowClear />
        </Form.Item>
        <Form.Item
          name="atCode"
          label="档案类型代码"
          normalize={(val) => (val ? parseInt(val, 10) || '' : val)}
          rules={[{ required: true }]}
        >
          <Input />
        </Form.Item>
        {/* <Form.Item name="atType" label="库类型" rules={[{ required: true }]}>
          <Select>
            {atTypeList.map((item) => (
              <Option value={item.value} key={item.value}>
                {item.name}
              </Option>
            ))}
          </Select>
        </Form.Item> */}
        <Form.Item
          label="选择模板"
          extra="选择最接近的档案模板，创建后可根据实际情况调整结构、界面和规则"
        >
          <Form.Item noStyle>
            <Select value={1} style={{ marginBottom: '8px' }}>
              <Option value={1}>通用模板</Option>
            </Select>
          </Form.Item>
          <Form.Item name="atLevel" noStyle>
            <Radio.Group>
              {atLevelList
                .filter((item: IBaseDic) => item.id)
                .map((item: IBaseDic) => (
                  <Radio value={item.id} key={item.id}>
                    {item.name}
                  </Radio>
                ))}
            </Radio.Group>
          </Form.Item>
          <Divider type="vertical" />
          <Checkbox
            checked={boxChecked}
            onChange={(evt: CheckboxChangeEvent) => {
              setBoxChecked(evt.target.checked);
            }}
          >
            装
            <Form.Item name="containerUnit" noStyle>
              <Input size="small" style={{ width: '50px' }} />
            </Form.Item>
          </Checkbox>
        </Form.Item>
        <Form.Item label="分类表">
          <Select value={1}>
            <Option value={1}>默认</Option>
          </Select>
        </Form.Item>
        <Divider />
        {/* <Form.Item label="允许删除">
          <Radio.Group disabled>
            <Space direction="vertical" size={0}>
              <Radio value={1} style={{ lineHeight: '32px' }}>
                禁止删除
              </Radio>
              <Radio value={2} style={{ lineHeight: '32px' }}>
                允许删除
              </Radio>
            </Space>
          </Radio.Group>
        </Form.Item> */}
        {/* <Form.Item label="编号控制">
          <Radio.Group disabled>
            <Radio value={1}>业务部门可自主编号</Radio>
            <Radio value={2}>档案室集中编号</Radio>
          </Radio.Group>
        </Form.Item> */}
        <Form.Item label="门类划分">
          <Radio.Group disabled value={1}>
            <Radio value={1}>文件档案</Radio>
            <Radio value={2}>照片档案</Radio>
            <Radio value={3}>音视频档案</Radio>
            <Radio value={4}>其他档案</Radio>
            <Radio value={5}>资料</Radio>
          </Radio.Group>
        </Form.Item>
        <Divider />
        <Form.Item label="其它">
          {/* <Checkbox.Group disabled> */}
          <Space direction="vertical">
            <Form.Item
              name="allowSearchUtilize"
              valuePropName="checked"
              normalize={(val) => (val ? 1 : 0)}
              noStyle
            >
              <Checkbox>提供检索和利用</Checkbox>
            </Form.Item>
            <Form.Item
              name="allowSearchUtilizeOtherUnit"
              valuePropName="checked"
              normalize={(val) => (val ? 1 : 0)}
              noStyle
            >
              <Checkbox>对外单位提供检索和利用</Checkbox>
            </Form.Item>
            {/* <Checkbox disabled>属于脱机载体，用于电子档案的脱机备份</Checkbox> */}
            {/* <Checkbox disabled>参与年报统计</Checkbox> */}
            {/* <Checkbox disabled>归档前执行四性监测</Checkbox> */}
          </Space>
          {/* </Checkbox.Group> */}
        </Form.Item>
        <Form.Item name="remark" label="备注">
          <Input.TextArea placeholder="备注信息描述，最多可填写2000字" maxLength={2000} showCount />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AddDialog;
